<template>
  <div class="app-container">
    <!-- 页面标题：新增无人机信息 -->
    <div class="page-title">新增无人机信息</div>

    <!-- 分隔线（可选，增强视觉分层） -->
    <el-divider></el-divider>

    <!-- 基本信息标题 -->
    <div class="section-title-basic">基本信息:</div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="90px">
        <el-col :span="12">
          <el-form-item label="品牌" prop="field101">
            <el-select v-model="formData.field101" placeholder="请选择品牌" clearable :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.uav_brand"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应用场景" prop="field102">
            <el-select v-model="formData.field102" placeholder="请选择应用场景" clearable :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.uav_target_applications"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号" prop="field103">
            <el-input v-model="formData.field103" placeholder="请输入型号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="field104">
            <el-select v-model="formData.field104" placeholder="请选择类型（飞行平台构型、机械结构）" clearable :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.uav_classification_by_airframe_configuration"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价位" prop="field105">
            <el-select v-model="formData.field105" placeholder="请选择价位" clearable :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.uav_price_section"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类" prop="field106">
            <el-select v-model="formData.field106" placeholder="请选择分类（基于重量）" clearable :style="{width: '100%'}">
              <el-option v-for="dict in dict.type.uav_classification_by_weight"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机身颜色" prop="field107">
            <el-input v-model="formData.field107" placeholder="请输入机身颜色" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="日期选择" prop="field108">
            <el-date-picker v-model="formData.field108" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机身材质" prop="field109">
            <el-input v-model="formData.field109" type="textarea" placeholder="请输入机身材质"
              :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    

    <!-- 分隔线（可选，增强视觉分层） -->
    <el-divider></el-divider>

    <!-- 性能信息 + 按钮（同一行紧凑排列） -->
    <div class="section-header mb-3">
      <div class="section-title-performance">性能信息:</div>
      <el-button 
        type="primary" 
        size="small" 
        icon="el-icon-plus" 
        @click="$refs.performance.open()"
        class="add-btn"
      >
        添加
      </el-button>
      <!-- 弹窗 -->
      <info-entry-u-a-v-add-performance ref="performance" @ok="handleAddOk" />
    </div>

    <!-- 分隔线（可选，增强视觉分层） -->
    <el-divider></el-divider>

    <!-- 零部件信息标题 -->
    <div class="section-title-components">零部件信息:</div>

    <!-- 标签按钮组（横向排列） -->
    <div class="tag-group">
      <!-- 6 个按钮 -->
      <el-button
        v-for="b in buttons"
        :key="b.key"
        type="primary"
        size="mini"
        @click="openDlg(b.key)"
        class="part-tag"
      >{{ b.label }}</el-button>

      <!-- 1 个动态弹窗壳 -->
      <el-dialog
        :title="currentTitle"
        :visible.sync="visible"
        width="600px"
        append-to-body
        :close-on-click-modal="false"
        @closed="currentDlg=null"
      >
        <!-- 异步动态组件：点谁加载谁 -->
        <component
          :is="currentDlg"
          v-if="currentDlg"
          @ok="visible=false"
          @cancel="visible=false"/>
      </el-dialog>
    </div>

    <!-- 按钮区域（居中 + 完全统一的尺寸和长度） -->
    <div class="button-group">
      <el-button 
        type="primary" 
        size="small" 
        icon="el-icon-document"
        @click="handleSaveDraft"
        class="unified-btn"
      >
        暂存
      </el-button>

      <el-button 
        type="primary" 
        size="small" 
        icon="el-icon-check"
        @click="handleSubmit"
        class="unified-btn"
      >
        保存
      </el-button>

      <el-button 
        type="default" 
        size="small" 
        icon="el-icon-back"
        @click="handleBack"
        class="unified-btn"
      >
        返回列表
      </el-button>
    </div>
  </div>
</template>
<script>

// 异步引入（懒加载）
const dialogs = {
  battery: () => import('./battery.vue'),
  commsTrans: () => import('./commsTrans.vue'),
  flightControl: () => import('./flightControl.vue'),
  fuselageStructure: () => import('./fuselageStructure.vue'),
  missionPayload: () => import('./missionPayload.vue'),
  powerSystem: () => import('./powerSystem.vue'),
}

import InfoEntryUAVAddPerformance from './performance.vue'

export default {
  dicts: [
    'uav_brand',
    'uav_target_applications',
    'uav_classification_by_airframe_configuration',
    'uav_price_section',
    'uav_classification_by_weight',
  ],
  name: 'DemoIndex',
  components: {InfoEntryUAVAddPerformance},
  props: [],
  data() {
    return {
      formData: {
        field101: null,
        field102: null,
        field103: '',
        field104: null,
        field105: null,
        field106: null,
        field107: '',
        field108: null,
        field109: '',
      },
      rules: {
        field101: [{
          required: true,
          message: '请选择品牌',
          trigger: 'change'
        }],
        field102: [{
          required: true,
          message: '请选择应用场景',
          trigger: 'change'
        }],
        field103: [{
          required: true,
          message: '请输入型号',
          trigger: 'blur'
        }],
        field104: [{
          required: true,
          message: '请选择类型',
          trigger: 'change'
        }],
        field105: [{
          required: true,
          message: '请选择价位',
          trigger: 'change'
        }],
        field106: [{
          required: true,
          message: '请选择分类',
          trigger: 'change'
        }],
        field107: [{
          required: true,
          message: '请输入机身颜色',
          trigger: 'blur'
        }],
        field108: [{
          required: true,
          message: '请选择日期',
          trigger: 'change'
        }],
        field109: [{
          required: true,
          message: '请输入机身材质',
          trigger: 'blur'
        }],
      },
      // 零部件类型列表
      buttons: ['机身结构', '动力系统', '飞控系统', '通信与数传', '电池', '任务载荷'],
      dialogVisible: false, // 弹窗显示状态（默认隐藏）
      currentTag: '', // 记录当前点击的标签内容
      currentIndex: -1, // 记录当前点击的标签索引（可选）
      visible: false,
      currentDlg: null,
      currentTitle: '',
      buttons: [
        { key: 'fuselageStructure', label: '机身结构' },
        { key: 'powerSystem',       label: '动力系统' },
        { key: 'flightControl',     label: '飞控系统' },
        { key: 'commsTrans',        label: '通信与数传' },
        { key: 'battery',           label: '电池' },
        { key: 'missionPayload',    label: '任务载荷' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    openDlg(key) {
      this.currentDlg   = dialogs[key]       // 设置异步组件
      this.currentTitle = this.buttons.find(b => b.key === key).label
      this.visible      = true               // 弹窗出现
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    // 暂存
    handleSaveDraft() {
      this.$message.success('草稿保存成功');
    },
    // 保存
    handleSubmit() {
      // 逻辑：提交数据并进入审核流程（状态标记为“待审核”）
      this.$message.success('保存成功');
    },
    // 返回列表
    handleBack() {
      // 逻辑：返回上一页或列表页
      this.$router.go(-1); // 返回上一页
      // 或跳转到列表页：this.$router.push('/drone/list');
    },
  }
}
</script>

<style scoped>
/* 外层容器：让子元素在同一行 */
.section-header {
  display: flex; /* 关键：启用Flex布局 */
  align-items: center; /* 垂直居中 */
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #666;
}

/* 文本样式 */
.section-title-basic {
  font-size: 16px;
  font-weight: 600;
  color: #666;
  margin-bottom: 20px;
}

.section-title-performance {
  font-size: 16px;
  font-weight: 600;
  color: #666;
  margin-right: 30px; /* 文本与按钮的间距 */
}

.section-title-components {
  font-size: 16px;
  font-weight: 600;
  color: #666;
  margin-bottom: 20px;
}

/* 按钮样式（可选，微调位置） */
.add-btn {
  background-color: #f5f7fa; /* 若依框架常用浅灰背景 */
  color: #606266; /* 文字颜色 */
  border: 1px solid #e4e7ed; /* 边框 */
  width: 130px; /* 固定宽度（足够容纳最长文字“返回列表”） */
  height: 36px; /* 固定高度（比small稍大，更协调） */
  font-size: 14px; /* 统一字号 */
  display: inline-flex; /*  inline-flex 避免标签独占一行 */
  align-items: center; /* 垂直居中（作用于内部内容，如文字） */
  justify-content: center; /* 水平居中（配合 Flex 布局，确保内容整体居中） */
}

/* 点击后的选中样式（可选） */
.add-btn:active {
  background-color: #b5e4faff;
  color: #1890ff;
  border-color: #91d5ff;
}

/* 标签组布局：横向排列，自动换行 */
.tag-group {
  display: flex;
  gap: 75px; /* 标签之间的间距 */
  flex-wrap: wrap; /* 超出宽度时自动换行 */
  justify-content: center; /* 水平居中 */
}

/* 单个标签样式（贴近图片的浅灰背景+边框） */
.part-tag {
  background-color: #f5f7fa; /* 若依框架常用浅灰背景 */
  color: #606266; /* 文字颜色 */
  border: 1px solid #e4e7ed; /* 边框 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  font-size: 14px; /* 字号 */
  width: 130px; /* 固定宽度（足够容纳最长文字“返回列表”） */
  height: 36px; /* 固定高度（比small稍大，更协调） */
  display: inline-flex; /*  inline-flex 避免标签独占一行 */
  align-items: center; /* 垂直居中（作用于内部内容，如文字） */
  justify-content: center; /* 水平居中（配合 Flex 布局，确保内容整体居中） */
}

/* 点击后的选中样式（可选） */
.part-tag:active {
  background-color: #b5e4faff;
  color: #1890ff;
  border-color: #91d5ff;
}

.button-group {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 100px; /* 按钮间距适中 */
  margin: 30px 0;
  padding-top: 50px;
  border-top: 1px solid #e4e7ed;
}

/* 核心：强制统一宽度、高度和文字居中 */
.unified-btn {
  width: 130px; /* 固定宽度（足够容纳最长文字“返回列表”） */
  height: 36px; /* 固定高度（比small稍大，更协调） */
  padding: 0 !important; /* 覆盖Element默认内边距，确保宽度生效 */
  font-size: 14px; /* 统一字号 */
  text-align: center; /* 文字居中（避免图标影响对齐） */
}

/* 图标与文字间距微调（可选） */
.unified-btn .el-icon {
  margin-right: 5px; /* 图标和文字保持一点距离 */
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;   /* 靠右 */
  align-items: center;         /* 垂直居中（可选） */
}

</style>